<template>
  <div class="backgroundStyle">
    <div class="loginStyle">
      <div style="color: rgb(76 104 139)">
        <div class="systemTitle">OverallAuth2.0 统一权限分发中心</div>
        <div class="systemSubTitle">简单、易懂、功能强大，欢迎访问使用。</div>
      </div>
      <div style="height: calc(100% - 260px)">
        <div class="fieldStyle">
          <div style="width: 100%; text-align: left; margin-left: 10%">
            <el-tag>密码登录</el-tag>
          </div>
        </div>
        <div class="fieldStyle">
          <div style="width: 100%">
            <!-- <el-input
              v-model="loginForm.CorporationCode"
              style="width: 80%; height: 40px"
              placeholder="请输入公司编码"
              :prefix-icon="Histogram"
            /> -->
            <el-select
              style="width: 80%"
              size="large"
              @change="corporationClick"
              v-model="loginForm.CorporationKey"
              placeholder="请选择公司"
            >
              <el-option
                v-for="item in corporationList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              />
            </el-select>
          </div>
        </div>
        <div class="fieldStyle">
          <div style="width: 100%">
            <!-- <el-input
              v-model="loginForm.UserName"
              style="width: 80%; height: 40px"
              placeholder="请输入用户名"
              :prefix-icon="User"
            /> -->
            <el-select
              style="width: 80%"
              size="large"
              @change="userClick"
              v-model="loginForm.UserName"
              placeholder="请选择用户"
            >
              <el-option
                v-for="item in userList"
                :key="item.value"
                :label="item.label"
                :value="item"
                :disabled="item.disabled"
              />
            </el-select>
          </div>
        </div>
        <div class="fieldStyle">
          <div style="width: 100%">
            <el-input
              v-model="loginForm.Password"
              style="width: 80%; height: 40px"
              placeholder="请输入密码"
              type="password"
              show-password
              :prefix-icon="Hide"
            />
          </div>
        </div>
        <div class="fieldStyle">
          <div style="width: 100%">
            <el-input
              v-model="code"
              style="width: 80%; height: 40px"
              placeholder="请输入验证码"
              :prefix-icon="Position"
            />
          </div>
        </div>
        <div class="fieldStyle" v-loading="loading">
          <div style="width: 100%">
            <el-button
              @click="loginClick"
              type="primary"
              style="width: 80%; height: 50px"
              >登录</el-button
            >
          </div>
        </div>
      </div>
      <div style="height: 85px; text-align: left; margin-left: 10px">
        <el-checkbox v-model="isStarted" label="码云是否Star" size="large" />
        <div style="color: red; font-size: 12px">
          *为了帮助更多的人知道及了解本项目,请帮忙Star。拜谢各位🙏🙏🙏
        </div>
      </div>
      <div class="loginBottomStyle">
        <el-divider content-position="left"
          ><el-icon color="red"><star-filled /></el-icon>特色功能</el-divider
        >
        <div class="featuresFunction">
          <el-tag>可视化权限设计</el-tag>
          <el-tag type="success">数据行权限</el-tag>
          <el-tag type="warning">数据列权限</el-tag>
          <el-tag type="danger">完整流程审批</el-tag>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, ref } from "vue";
import {
  User,
  Hide,
  Position,
  StarFilled,
  Histogram,
} from "@element-plus/icons-vue";
import { getLoginOrInsert, getUserByCorporationKey } from "@/api/user";
import { LoginInput } from "@/model/user/LoginInput";
import { useUserStore } from "../../store/user";
import { selectOutPut } from "@/model/public/selectModel";
import { getCorporationSelect, login } from "@/api/openApi";
import {
  CorporationKey,
  Password,
  SystemKey,
  UserId,
  UserName,
} from "@/model/const";
import router from "@/router";

export default defineComponent({
  setup() {
    //公司数据
    const corporationList = ref<selectOutPut[]>([]);
    //用户数据
    const userList = ref<selectOutPut[]>([]);
    const userStore = useUserStore();
    const loading = ref(false);
    const userName = ref("");
    const password = ref("");
    const code = ref("");
    const isStarted = ref<boolean>(false);

    const loginForm = reactive<LoginInput>({
      UserName: UserName,
      UserId: UserId,
      Password: Password,
      CorporationKey: CorporationKey,
      SystemKey: SystemKey,
    });

    //初始加载dom
    onMounted(() => {
      getCorporation();
    });

    const loginClick = function () {
      loading.value = true;
      login(loginForm).then(({ data, code }) => {
        setTimeout(async () => {
          if (code == 200) {
            userStore.token = data[0].token.toString();
            userStore.expiresDate = data[0].expiresDate;
            userStore.userInfo = {
              userName: data[0].userName,
              userId: data[0].userId,
            };
            userStore.corporationKey = data[0].corporationKey;
            userStore.loadMenus();
            // ElMessage({
            //   message: "登录成功",
            //   type: "success",
            // });
            // router.push("/panel");

            // window.location.reload();
            getLoginOrInsert().then(() => {
              router.push("/panel");
            });
          }

          loading.value = false;
        }, 1000);
      });
    };

    //获取下拉框中的公司数据
    const getCorporation = function () {
      getCorporationSelect().then(({ data, code }) => {
        if (code == 200) {
          corporationList.value = data;
          corporationClick(loginForm.CorporationKey);
        }
      });
    };

    //公司点击事件
    const corporationClick = function (value: string) {
      if (value !== "6A75EC49-2093-4B89-950F-65E6E72746DA") {
        loginForm.UserId = "";
        loginForm.UserName = "";
      } else {
        loginForm.UserId = "6A75EC49-2093-4B89-950F-65E6E72746BA";
        loginForm.UserName = "张三";
      }
      getUserByCorporationKey({
        corporationKey: value,
      }).then(({ data, code }) => {
        if (code == 200) {
          userList.value = data;
        }
      });
    };

    //用户事件
    const userClick = function (item: selectOutPut) {
      loginForm.UserId = item.value;
      loginForm.UserName = item.label;
    };
    return {
      User,
      Hide,
      Position,
      StarFilled,
      Histogram,
      userName,
      password,
      code,
      isStarted,
      loginClick,
      loginForm,
      loading,
      corporationList,
      userList,
      corporationClick,
      userClick,
    };
  },
  components: {},
});
</script>

<style scoped>
.backgroundStyle {
  background-image: url(../../assets/picture/login.png);
  height: calc(100vh);
  width: 100%;
  background-size: 100% 100%;
  display: flex;
  background-attachment: fixed;
}

.loginStyle {
  width: 420px;
  height: 550px;
  margin-top: 12%;
  margin-left: 10%;
  border: 2px solid white;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0px 0px 19px 0px rgba(132, 203, 255, 2.5);
}
.systemTitle {
  height: 70px;
  font-size: 27px;
  justify-content: center;
  align-items: center;
  display: flex;
}
.systemSubTitle {
  display: flex;
  height: 30px;
  font-size: 14px;
  justify-content: center;
  border-bottom: 1px solid #e1dede;
}

.loginBottomStyle {
  height: 60px;
  /* font-size: 30px; */
  justify-content: center;
  align-items: center;
}

.fieldStyle {
  display: flex;
  margin-top: 10px;
}

.featuresFunction {
  display: flex;
  margin-top: 20px;
}
.featuresFunction > * {
  margin-left: 10px;
}
</style>